<template>
    <div class="app" >
        <header class="mint-header"><div class="mint-header-button is-left"><a href="#/home" class="router-link-active"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-back"></i></span> <label class="mint-button-text"></label></button></a></div> <h1 class="mint-header-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;  font-size:16px;">女性健康</font></font></h1> <div class="mint-header-button is-right"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-more"></i></span> <label class="mint-button-text"></label></button></div></header>
        <div class="btu">
            <div class="btu-item" @click="msg=0" :class="{'tt':msg===0}">妇科炎症</div>
            <div class="btu-item" @click="msg=1" :class="{'tt':msg===1}">乳腺疾病</div>
            <div class="btu-item" @click="msg=2" :class="{'tt':msg===2}">美体瘦身</div>
            <div class="btu-item" @click="msg=3" :class="{'tt':msg===3}">保胎促孕</div>
            <div class="btu-item" @click="msg=4" :class="{'tt':msg===4}">月经不调</div>
            <div class="btu-item" @click="msg=5" :class="{'tt':msg===5}">女性避孕</div>
        </div> 
        <div class="centent-item" v-show="msg==0">
             <div class="centent"  v-for="item of list" :key="item.id" @click="getDetail(item.lid)"><img :src="item.pic" alt=""><p>{{item.title}}</p><div>{{item.info}}
            </div><p class="centcol">￥{{item.price.toFixed(2)}}</p></div>
             
        </div>

         <div class="centent-item" v-show="msg==1">
               <div class="centent"  v-for="item of list1" :key="item.id" ><img :src="item.pic" alt="" @click="getDetail(item.id)"><p>{{item.title}}</p><div>{{item.info}}
            </div><p class="centcol">￥{{item.price.toFixed(2)}}</p></div>
         </div>
         <div class="centent-item" v-show="msg==2">
             <div class="centent"  v-for="item of list2" :key="item.id"><img :src="item.pic" alt=""><p>{{item.title}}</p><div>{{item.info}}
            </div><p class="centcol">￥{{item.price.toFixed(2)}}</p></div>
         </div>
         <div class="centent-item" v-show="msg==3">
              <div class="centent"  v-for="item of list3" :key="item.id"><img :src="item.pic" alt=""><p>{{item.title}}</p><div>{{item.info}}
            </div><p class="centcol">￥{{item.price.toFixed(2)}}</p></div>
         </div>
         <div class="centent-item" v-show="msg==4">
              <div class="centent"  v-for="item of list4" :key="item.id"><img :src="item.pic" alt=""><p>{{item.title}}</p><div>{{item.info}}
            </div><p class="centcol">￥{{item.price.toFixed(2)}}</p></div>
         </div>
         <div class="centent-item" v-show="msg==5">
             <div class="centent"  v-for="item of list5" :key="item.id"><img :src="item.pic" alt=""><p>{{item.title}}</p><div>{{item.info}}
            </div><p class="centcol">￥{{item.price.toFixed(2)}}</p></div>
         </div>
         

       </div>
    
</template>
<script>
export default {
  data(){
      return{msg:0,list:[],list1:[],list2:[],list3:[],list4:[],list5:[]}
  },  
  methods:{
    getlist(){
              var  url="http://127.0.0.1:3000/getnvxingfuke";
               this.$http.get(url).then(result=>{
            //   console.log(result.body);
               this.list=result.body;
        } ); 
    },
    getlist1(){
              var  url="http://127.0.0.1:3000/getruxianjibing";
               this.$http.get(url).then(result=>{
             console.log(result.body);
               this.list1=result.body;
        }); 
    },
    getlist2(){
              var  url="http://127.0.0.1:3000/getmeitishoushen";
               this.$http.get(url).then(result=>{
             console.log(result.body);
               this.list2=result.body;
        }); 
    },
    getlist3(){
              var  url="http://127.0.0.1:3000/getbaotaicuiyun";
               this.$http.get(url).then(result=>{
             console.log(result.body);
               this.list3=result.body;
        }); 
    },
    getlist4(){
              var  url="http://127.0.0.1:3000/getyuejing";
               this.$http.get(url).then(result=>{
             console.log(result.body);
               this.list4=result.body;
        }); 
    },
    getlist5(){
              var  url="http://127.0.0.1:3000/getbiyun";
               this.$http.get(url).then(result=>{
             console.log(result.body);
               this.list5=result.body;
        }); 
    },
     getDetail(lid){
            console.log(lid);
             this.$router.push("/home/goodsinfo?lid="+lid);
            }
  },
  
   created(){
        this.getlist();
         this.getlist1();
         this.getlist2();
         this.getlist3();
         this.getlist4();
         this.getlist5();
        
        
    }
  }
</script>
<style>
.btu{
    height: 70px;
    width: 100%;
   
    padding: 4px 0;
   display: flex;
   flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}
.btu-item{
    width: 30%;
    height: 28px;
    border: 1px solid rgb(236, 232, 232);
    border-radius: 10px;
    margin: 0 5px;
    background: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
}
.list{
    height: 119px;
    background: #fff;
    border-top: rgb(236, 232, 232);
    border-bottom: rgb(236, 232, 232);
}
.tt{
       
    border: 1px solid #24c3d8;
    color:#24c3d8;
}
.centent{
    height: 107px;
    width: 100%;
    padding-top: 25px;
    border-bottom: 1px solid rgb(236, 232, 232);
    background: #fff;
}
.centent  img{
    display: block;
    float: left;
    width: 80px;
    height: 80px;
    margin-left:15px;
}
.centent p{
    margin-left:120px; 
    margin-bottom: 0;
    font-size: 16px;
    color: #111;
}
.centent div{
    width: 200px;
    height: 22px;
     margin-left:120px; 
    font-size: 12px;
     white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis;
}
.centent .centcol{
    color: red;
}
</style>


